<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="secured" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<secured:authorize ifAnyGranted="ROLE_VER_CLIENTES, ROLE_ACTUALIZAR_CLIENTE">
<head>
	
</head>
<body>
	<div class="contenedor grande">
		<form:form commandName="modeloCuenta" action="cuentas.do" method="post" acceptCharset="UTF-8" autocomplete="off">
			<form:hidden path="accion" />
			<form:hidden path="id" />
			
			<form:errors cssClass="mensaje-error-campo" />
			
			<!-- BOTONES -->
			<div class="botones">
				<secured:authorize ifAnyGranted="ROLE_ACTUALIZAR_CUENTA">
					<button type="button" onclick="javascript:cancelar();" class="derecha"><spring:message code="etiqueta.cancelar" text="Cancelar" /></button>
				</secured:authorize>
				<secured:authorize ifNotGranted="ROLE_ACTUALIZAR_CUENTA">
					<secured:authorize ifAnyGranted="ROLE_VER_CUENTAS">
						<button type="button" onclick="javascript:cancelar();" class="derecha"><spring:message code="etiqueta.volver" text="Volver" /></button>
					</secured:authorize>
				</secured:authorize>
				<button type="button" onclick="javascript:primera();"><spring:message code="etiqueta.informacion" text="Información" /></button>
				<button type="button" onclick="javascript:segunda();"><spring:message code="etiqueta.movimientos" text="Movimientos" /></button>
				<button type="button" onclick="javascript:tercera();"><spring:message code="etiqueta.pagos" text="Pagos" /></button>
				<button type="button" onclick="javascript:cuarta();"><spring:message code="etiqueta.facturas" text="Facturas" /></button>
			</div>
				
			<!-- PAGINAS --> 
			<div class="paginas">
				<div id="primera" class="pagina">
					<h2><spring:message code="etiqueta.datosCuenta" text="Datos de la cuenta." /></h2>
					
					<!-- PRIMER FILA -->
					<div class="campo horizontal">
		      			<form:label path="id"><spring:message code="etiqueta.cuenta" text="Cuenta" /></form:label>
						<form:input path="id" disabled="true" />
		      		</div>
		      		<div class="campo horizontal">
		      			<form:label path="estado"><spring:message code="etiqueta.estado" text="Estado" /></form:label>
						<form:input path="estado" disabled="true" />
		      		</div>
		      		<div class="separador">
						&nbsp;
					</div>
					
					<!-- TERCER FILA -->
					<div class="campo horizontal">
		      			<form:label path="creditos"><spring:message code="etiqueta.creditos" text="Créditos" /></form:label>
						<form:input path="creditos" disabled="true" />
		      		</div>
		      		<div class="campo horizontal">
		      			<form:label path="debitos"><spring:message code="etiqueta.debitos" text="Débitos" /></form:label>
						<form:input path="debitos" disabled="true" />
		      		</div>
		      		<div class="campo horizontal">
		      			<form:label path="balance"><spring:message code="etiqueta.balance" text="Balance" /></form:label>
						<form:input path="balance" disabled="true" />
		      		</div>
		      		<div class="separador">
						&nbsp;
					</div>
					
					<!-- TERCER FILA -->
					<div class="campo horizontal">
		      			<form:label path="fechaCreacion"><spring:message code="etiqueta.fechaCreacion" text="Fecha de creación" /></form:label>
						<form:input path="fechaCreacion" disabled="true" />
		      		</div>
		      		<div class="campo horizontal">
		      			<form:label path="fechaActivacion"><spring:message code="etiqueta.fechaActivacion" text="Fecha de activación" /></form:label>
						<form:input path="fechaActivacion" disabled="true" />
		      		</div>
		      		<div class="campo horizontal">
		      			<form:label path="fechaDesactivacion"><spring:message code="etiqueta.fechaDesactivacion" text="Fecha de desactivación" /></form:label>
						<form:input path="fechaDesactivacion" disabled="true" />
		      		</div>
		      		<div class="separador">
						&nbsp;
					</div>
					
					<!-- CUARTA FILA -->
					<div class="campo horizontal">
		      			<form:label path="fechaCierre"><spring:message code="etiqueta.fechaCierre" text="Fecha de cierre" /></form:label>
						<form:input path="fechaCierre" disabled="true" />
		      		</div>
		      		<div class="campo horizontal">
		      			<form:label path="fechaEstadoCuenta"><spring:message code="etiqueta.fechaEstadoCuenta" text="Fecha de último estado de cuenta" /></form:label>
						<form:input path="fechaEstadoCuenta" disabled="true" />
		      		</div>
		      		<div class="separador">
						&nbsp;
					</div>
				</div>
				<div id="segunda" class="pagina">
					<h2><spring:message code="etiqueta.movimientos" text="Movimientos" /></h2>
					
					<div class="movimientos horizontal"></div>
					
					<div class="separador">
						&nbsp;
					</div>
										
				</div>
				<div id="tercera" class="pagina">
					<h2><spring:message code="etiqueta.pagos" text="Pagos" /></h2>
					
					<div class="pagos horizontal"></div>
					
					<div class="separador">
						&nbsp;
					</div>
										
				</div>
				<div id="cuarta" class="pagina">
					<h2><spring:message code="etiqueta.facturas" text="Facturas" /></h2>
					
					<div class="facturas horizontal"></div>
					
					<div class="separador">
						&nbsp;
					</div>
										
				</div>
			</div>
		</form:form>
	</div>
	
	<!-- JAVASCRIPT -->
	<script type="text/javascript">
		var tablaMovimientos, tablaPagos, tablaFacturas;

		var cabezalesMovimientos = [
			'<spring:message code="etiqueta.movimiento" text="Movimiento" />',
			'<spring:message code="etiqueta.fechaMovimiento" text="Fecha de movimiento" />',
			'<spring:message code="etiqueta.tipoMovimiento" text="Tipo de movimiento" />',
			'<spring:message code="etiqueta.monto" text="Monto" />',
			'<spring:message code="etiqueta.creditos" text="Creditos" />',
			'<spring:message code="etiqueta.debitos" text="Debitos" />',
			'<spring:message code="etiqueta.balance" text="Balance" />',
			''
		];
		var cabezalesPagos = [
		    '<spring:message code="etiqueta.pago" text="Pago" />',
		    '<spring:message code="etiqueta.estado" text="Estado" />',
		    '<spring:message code="etiqueta.tipoPago" text="Tipo de pago" />',
		    '<spring:message code="etiqueta.metodoPago" text="Medio de pago" />',
		    '<spring:message code="etiqueta.monto" text="Monto" />',
		    '<spring:message code="etiqueta.disponible" text="Disponible" />',
		    ''
		];
		var cabezalesFacturas = [
			'<spring:message code="etiqueta.factura" text="Factura" />',
			'<spring:message code="etiqueta.estado" text="Estado" />',
			'<spring:message code="etiqueta.tipoFactura" text="Tipo de factura" />',
			'<spring:message code="etiqueta.identificador" text="Identificador" />',
			'<spring:message code="etiqueta.monto" text="Monto" />',
			'<spring:message code="etiqueta.impuestos" text="Impuestos" />',
			'<spring:message code="etiqueta.descuentos" text="Descuentos" />',
			'<spring:message code="etiqueta.fechaGeneracion" text="Fecha de generación" />',
			''
		];
		
		jQuery(document).ready(function(){

			movimientos();
			
			pagos();

			facturas();
					
		});

		function movimientos() {
			jQuery.ajax(
			    {
			        url: "movimientos.json",
			        cache: false,
			        contentType: 'application/json; charset=UTF-8',
			        dataType: 'json',
			        data: {
				        accion: 'LISTAR',
				        id: '${modeloCuenta.id}'
				    }
			    }
			).done(
				function(movimientos){
					var datos = [];

					//Datos
		   			if(movimientos.length > 0){
	       				jQuery.each(movimientos, function(index, value){
	       					var movimiento = jQuery(value)[0];
	       					var id = movimiento.id;
	       					var tipo = '';
	       					
	       					switch(movimiento.tipo) {
					   		case 'CREDITO':
					   			tipo = '<spring:message code="etiqueta.tipoMovimiento.CREDITO" text="Crédito" />';
						   		break;
					   		case 'DEBITO':
					   			tipo = '<spring:message code="etiqueta.tipoMovimiento.DEBITO" text="Débito" />';
						   		break;
					   		}

	       					datos.push([
  								id,
  								movimiento.fecha,
  								tipo,
  								movimiento.monto,
  								movimiento.creditos,
  								movimiento.debitos,
  								movimiento.balance,
  								links(id, movimiento.tipo)
			  		       	]);
	       				});
		   			}
		
					tablaMovimientos = $(".movimientos").handsontable(
		   		   		{
		   		   			autoWrapRow: true,
		   		   			colHeaders : cabezalesMovimientos,
		   		   			colWidths : [80, 150, 130, 80, 80, 80, 80, 70],
		 	   		   		columns: [
		 	   		   	    	{data: 0},
		 	   		   	    	{data: 1},
		 	   		   	    	{data: 2},
		 	   		   	    	{data: 3},
		 	   		   	    	{data: 4},
		 	   		   	 		{data: 5},
		 	   		   	    	{data: 6,},
		 	   		   	 		{data: 7, type: {renderer: textoHtml}}
		 	   		   	  	],
		   		   			columnSorting : true,
		   		   			contextMenu : false,
		   		   			currentRowClassName : 'seleccionado',
		   	   		   		data: datos,
		   	   		   		maxCols : 8,
		   	   				minCols : 8,
		   	   				minRows : 1,
		   	   		  		stretchH: 'last'
		   	   		   	}
		   	   		);
				}
			);
		}

		function pagos() {
			jQuery.ajax(
			    {
			        url: "pagos.json",
			        cache: false,
			        contentType: 'application/json; charset=UTF-8',
			        dataType: 'json',
			        data: {
				        accion: 'LISTAR',
				        id: '${modeloCuenta.id}'
				    }
			    }
			).done(
				function(pagos){
					var datos = [];

					//Datos
		   			if(pagos.length > 0){
	       				jQuery.each(pagos, function(index, value){
	       					var pago = jQuery(value)[0];
	       					var id = pago.id;
	       					var estado = '', tipo = '', metodo = '';
	       					
	       					switch(pago.estado) {
					   		case 'CANCELADO':
						   		estado = '<spring:message code="etiqueta.estadoPago.CANCELADO" text="Cancelado" />';
						   		break;
					   		case 'COBRADO':
					   			estado = '<spring:message code="etiqueta.estadoPago.COBRADO" text="Cobrado" />';
						   		break;
					   		case 'DISPONIBLE':
					   			estado = '<spring:message code="etiqueta.estadoPago.DISPONIBLE" text="Disponible" />';
						   		break;
					   		case 'GENERADO':
					   			estado = '<spring:message code="etiqueta.estadoPago.GENERADO" text="Generado" />';
						   		break;
					   		case 'PENDIENTE':
					   			estado = '<spring:message code="etiqueta.estadoPago.PENDIENTE" text="Pendiente" />';
						   		break;
					   		case 'RECHAZADO':
					   			estado = '<spring:message code="etiqueta.estadoPago.RECHAZADO" text="Rechazado" />';
						   		break;
					   		case 'USADO':
					   			estado = '<spring:message code="etiqueta.estadoPago.USADO" text="Usado" />';
						   		break;
				   			}

				   			switch(pago.tipo) {
				   			case 'CHEQUE':
				   				tipo = '<spring:message code="etiqueta.tipoPago.CHEQUE" text="Cheque" />';
					   			break;
				   			case 'CREDITO':
				   				tipo = '<spring:message code="etiqueta.tipoPago.CREDITO" text="Crédito" />';
					   			break;
				   			case 'DEBITO':
				   				tipo = '<spring:message code="etiqueta.tipoPago.DEBITO" text="Débito" />';
					   			break;
				   			case 'EFECTIVO':
				   				tipo = '<spring:message code="etiqueta.tipoPago.EFECTIVO" text="Efectivo" />';
					   			break;
				   			case 'GIRO':
				   				tipo = '<spring:message code="etiqueta.tipoPago.GIRO" text="Giro" />';
					   			break;
				   			case 'TRANSFERENCIA':
				   				tipo = '<spring:message code="etiqueta.tipoPago.TRANSFERENCIA" text="Transferencia" />';
					   			break;
					   		}

					   		switch(pago.metodo) {
					   		case 'CHEQUE':
						   		metodo = '<spring:message code="etiqueta.metodoPago.CHEQUE" text="Transferencia" />';
						   		break;
					   		case 'EFECTIVO':
					   			metodo = '<spring:message code="etiqueta.metodoPago.EFECTIVO" text="Efectivo" />';
					   			break;
					   		case 'GIRO_POSTAL':
					   			metodo = '<spring:message code="etiqueta.metodoPago.GIRO_POSTAL" text="Giro postal" />';
					   			break;
					   		case 'TARJETA':
					   			metodo = '<spring:message code="etiqueta.metodoPago.TARJETA" text="Tarjeta" />';
					   			break;
					   		case 'TRANSFERENCIA':
					   			metodo = '<spring:message code="etiqueta.metodoPago.TRANSFERENCIA" text="Transferencia" />';
					   			break;
					   		}

	       					datos.push([
  								id,
  								estado,
  								tipo,
  								metodo,
  								pago.monto,
  								pago.disponible,
  								links(id, pago.estado, pago.tipo, pago.metodo)
			  		       	]);
	       				});
		   			}
		
					tablaPagos = $(".pagos").handsontable(
		   		   		{
		   		   			autoWrapRow: true,
		   		   			colHeaders : cabezalesPagos,
		   		   			colWidths : [90, 100, 150, 150, 100, 100, 140],
		 	   		   		columns: [
		 	   		   	    	{data: 0},
		 	   		   	    	{data: 1},
		 	   		   	    	{data: 2},
		 	   		   	    	{data: 3},
		 	   		   	    	{data: 4},
		 	   		   	 		{data: 5},
		 	   		   	    	{data: 6, type: {renderer: textoHtml}}
		 	   		   	  	],
		   		   			columnSorting : true,
		   		   			contextMenu : false,
		   		   			currentRowClassName : 'seleccionado',
		   	   		   		data: datos,
		   	   		   		maxCols : 7,
		   	   				minCols : 7,
		   	   				minRows : 1,
		   	   		  		stretchH: 'last'
		   	   		   	}
		   	   		);
				}
			);
		}

		function facturas() {
			jQuery.ajax(
			    {
			        url: "facturas.json",
			        cache: false,
			        contentType: 'application/json; charset=UTF-8',
			        dataType: 'json',
			        data: {
				        accion: 'LISTAR',
				        id: '${modeloCuenta.id}'
				    }
			    }
			).done(
				function(facturas){
					var datos = [];

					//Datos
		   			if(facturas.length > 0){
	       				jQuery.each(facturas, function(index, value){
	       					var factura = jQuery(value)[0];
	       					var id = factura.id;
	       					var estado = '', tipo = '';
	       					
	       					switch(factura.estado) {
					   		case 'CANCELADA':
						   		estado = '<spring:message code="etiqueta.estadoFactura.CANCELADA" text="Cancelada" />';
						   		break;
					   		case 'GENERADA':
					   			estado = '<spring:message code="etiqueta.estadoFactura.GENERADA" text="Generada" />';
						   		break;
					   		case 'PENDIENTE':
					   			estado = '<spring:message code="etiqueta.estadoFactura.PENDIENTE" text="Pendiente" />';
						   		break;
					   		case 'PAGA':
					   			estado = '<spring:message code="etiqueta.estadoFactura.PAGA" text="Paga" />';
						   		break;
					   		}

					   		switch(factura.tipo) {
					   		case 'FINAL':
					   			tipo = '<spring:message code="etiqueta.tipoFactura.FINAL" text="Final" />';
						   		break;
					   		case 'MENSUAL':
					   			tipo = '<spring:message code="etiqueta.tipoFactura.MENSUAL" text="Mensual" />';
						   		break;
					   		}

	       					datos.push([
  								id,
  								estado,
  								tipo,
  								factura.identificador,
  								factura.monto,
  								factura.impuestos,
  								factura.descuentos,
  								factura.fechaGeneracion,
  								links(id, factura.estado ,factura.tipo)
			  		       	]);
	       				});
		   			}
		
					tablaFacturas = $(".facturas").handsontable(
		   		   		{
		   		   			autoWrapRow: true,
		   		   			colHeaders : cabezalesFacturas,
			   		   		colWidths : [80, 80, 100, 100, 80, 80, 80, 150, 70],
		 	   		   		columns: [
		 	   		   	    	{data: 0},
		 	   		   	    	{data: 1},
		 	   		   	    	{data: 2},
		 	   		   	    	{data: 3},
		 	   		   	    	{data: 4},
		 	   		   	 		{data: 5},
		 	   		   	    	{data: 6,},
		 	   		   	 		{data: 7,},
		 	   		   	 		{data: 8, type: {renderer: textoHtml}}
		 	   		   	  	],
		   		   			columnSorting : true,
		   		   			contextMenu : false,
		   		   			currentRowClassName : 'seleccionado',
		   	   		   		data: datos,
		   	   		   		maxCols : 9,
		   	   				minCols : 9,
		   	   				minRows : 1,
		   	   		  		stretchH: 'last'
		   	   		   	}
		   	   		);
				}
			);
		}

		function links(id, tipoMovimiento) {

		}

		function links(id, estadoPago, tipoPago, metodoPago) {

		}

		function links(id, estadoFactura, tipoFactura) {

		}
		
	</script>
</body>
</secured:authorize>